<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SiteServer 管理后台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link href="../assets/images/favicon.png" rel="icon" type="image/png" />
    <link
      href="../assets/css/font-awesome-4.7.0.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../assets/css/bootstrap.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../assets/css/siteserver.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <style>
      .nav .nav-link {
        font-weight: normal;
        border-radius: 1.25rem;
        font-size: 14px;
      }
    </style>
  </head>

  <body>
    <div id="main" class="m-2">
      <template v-if="pageLoad">
        <div class="card-box">
          <div class="mb-3">
            <ul class="nav nav-pills nav-justified">
              <li class="nav-item">
                <a
                  class="nav-link"
                  :class="{active: !type}"
                  href="javascript:;"
                  @click="{btnNavClick('')}"
                >
                  表单提交模板
                </a>
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  :class="{active: type === 'list'}"
                  href="javascript:;"
                  @click="{btnNavClick('list')}"
                >
                  数据显示模板
                </a>
              </li>
            </ul>
          </div>

          <hr />

          <div
            v-if="pageAlert"
            class="alert"
            v-bind:class="{ 'alert-primary': pageAlert.type === 'primary', 'alert-warning': pageAlert.type === 'warning', 'alert-success': pageAlert.type === 'success', 'alert-danger': pageAlert.type === 'danger' }"
          >
            <button
              v-on:click="pageAlert = null"
              class="close"
              data-dismiss="alert"
            >
              ×
            </button>
            <span v-html="pageAlert.html"></span>
          </div>

          <div class="row">
            <div
              v-for="templateInfo in templateInfoList"
              class="col-sm-6 col-md-4 col-lg-3 col-xs-12"
            >
              <div class="card m-b-20">
                <div class="card-body">
                  <h5 class="card-title text-primary mb-3">
                    模板文件夹：{{ templateInfo.name }}
                  </h5>
                  <h6 class="card-subtitle text-muted">
                    <mark style="line-height: 24px">
                      &lt;stl:form name="表单名称" type="{{templateInfo.name}}"&gt;&lt;/stl:form&gt;
                    </mark>
                  </h6>
                </div>
                <img
                  v-if="templateInfo.icon"
                  class="img-fluid"
                  :src="getIconUrl(templateInfo)"
                />
                <div class="card-body">
                  <div class="text-center">
                    <p>{{ templateInfo.description }}</p>
                    <h5 v-if="templateInfo.publisher" class="text-warning">
                      作者： {{ templateInfo.publisher }}
                    </h5>
                    <a
                      v-if="!templateInfo.publisher"
                      href="javascript:;"
                      @click="btnEditClick(templateInfo.name)"
                      class="card-link"
                    >
                      设 置
                    </a>
                    <a
                      href="javascript:;"
                      @click="btnHtmlClick(templateInfo)"
                      class="card-link"
                    >
                      代码编辑
                    </a>
                    <a
                      href="javascript:;"
                      @click="btnPreviewClick(templateInfo.name)"
                      class="card-link"
                    >
                      预 览
                    </a>
                    <a
                      v-if="!templateInfo.publisher"
                      href="javascript:;"
                      @click="btnDeleteClick(templateInfo)"
                      class="card-link"
                    >
                      删 除
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="text-center" style="margin-top: 100px">
          <img class="mt-3" src="../assets/images/loading.gif" />
          <p class="lead mt-3 text-nowrap">载入中，请稍后...</p>
        </div>
      </template>
    </div>
  </body>
</html>
<script src="../assets/lib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../assets/lib/lodash-4.17.10.min.js"></script>
<script src="../assets/lib/layer-3.1.1/layer.js"></script>
<script src="../assets/lib/sweetalert2-7.28.4.all.min.js"></script>
<script src="../assets/lib/vue-2.5.16.min.js" type="text/javascript"></script>
<script src="../assets/lib/vee-validate-2.1.0.js"></script>
<script src="../assets/lib/vee-validate-locale-zh_CN-2.1.0.js"></script>
<script src="../assets/lib/js.cookie-2.2.0.js"></script>
<script src="../assets/lib/es6-promise.auto.min.js"></script>
<script src="../assets/lib/axios-0.18.0.min.js"></script>
<script src="../assets/js/utils.js" type="text/javascript"></script>
<script src="../assets/lib/vue-multiselect-2.1.0/script.min.js"></script>
<script src="templates.js" type="text/javascript"></script>
